<template>
  <div class="wrapper">
    <parallax class="section page-header header-filter" :style="headerStyle">
      <HeadLine style="z-index: 1;">
        <template slot="centre">
          成功案例
        </template>
      </HeadLine>
    </parallax>
    <div class="main main-raised">
      <div class="section section-basic section-divider">
        <MainTitle>
          <template slot="mainTitle">
            CLASSIC CASE
          </template>
          <template slot="mainInfo">
            典型案例
          </template>
        </MainTitle>
        <div class="content-flex"><CaseList></CaseList></div>
      </div>
    </div>
  </div>
</template>

<script>
import HeadLine from "./components/HeadLine.vue";
import MainTitle from "./components/MainTitle";
import CaseList from "./components/CaseList.vue";
export default {
  components: {
    HeadLine,
    MainTitle,
    CaseList
  },
  bodyClass: "profile-page",
  props: {
    header: {
      type: String,
      default: require("@/assets/img/jjfa.jpg")
    }
  },
  computed: {
    headerStyle() {
      return {
        backgroundImage: `url(${this.header})`
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.content-flex {
  // display: flex;
  // flex-direction: column;
  // flex-wrap: wrap;
  // align-content: center;
  // align-items: center;

  .contact-info {
    p {
      font-size: 1rem;
      font-weight: 400;
    }
    .dz::before {
      content: "地 址：";
      font-weight: 700;
      font-size: 1rem;
    }
    .dh::before {
      content: "电 话：";
      font-weight: 700;
      font-size: 1rem;
    }
    .yx::before {
      content: "邮 箱：";
      font-weight: 700;
      font-size: 1rem;
    }

    .cz::before {
      content: "传 真：";
      font-weight: 700;
      font-size: 1rem;
    }
    .yzbm::before {
      content: "邮政编码：";
      font-weight: 700;
      font-size: 1rem;
    }
  }
}
</style>
